<template>
	<el-dialog v-model="props.isShow" width="28%" close-icon="CloseBold" @close="handleClose"
		class="transaction-spot-dialog-dark">
		<template #title>
			<p class="text-18px font-bold">下单确认</p>
		</template>
		<template #default>
			<div class="mb-10px text-#ffffff">
				<div class="flex items-center">
					<img :src="props.icon" class="w-28px h-28px mr-10px">
					<p class="text-18px font-bold mr-20px">
						{{ props.coin }}
					</p>
					<p class="text-14px"
					:class="{'text-#F34E5F':props.to == 'sell',
				'text-#07B175':props.to == 'pay'}">
						{{ props.to == 'sell' ? '卖出' : '买入' }}
					</p>
				</div>
				<div class="mt-20px text-16px">
					<div class="flex items-center justify-between mb-10px">
						<p class="text-#B5B5B5">委托价格</p>
						<p>{{ props.price }}</p>
					</div>
					<div class="flex items-center justify-between mb-10px">
						<p class="text-#B5B5B5">数量</p>
						<p>{{ props.amount }}</p>
					</div>
					<div class="flex items-center justify-between">
						<p class="text-#B5B5B5">类型</p>
						<p>{{ props.methods }}</p>
					</div>
				</div>
				<div class="mt-40px flex items-center justify-between">
					<el-button color="#202020" style="width: 48%;height: 50px;font-size: 18px;"
					@click="cancel">
						取消
					</el-button>
					<el-button color="#114CEE" style="width: 48%;height: 50px;font-size: 18px;"
					@click="confirm">
						确认
					</el-button>
				</div>
			</div>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface IProps {
	isShow: boolean;
	coin:string;
	icon:string;
	to:string;
	price:string;
	amount:string;
	methods:string;
}

const props = defineProps<IProps>();
const emit = defineEmits(['close','cancel','confirm'])

const handleClose = () => {
	emit('close', false);
}

const cancel = () => {
	emit('cancel', false);
}

const confirm = () => {
	emit('confirm');
}
</script>
<style lang="scss">
.transaction-spot-dialog-dark {
	background: #2B2B2B;
}
</style>
